<template>
    <div class="page-container">
        <div class="grid-container">
            <a-row type="flex" class="grid-table-tool">
                <a-col :span="12" :order="1" class="tool-action">
                </a-col>
                <a-col :span="12" :order="2" class="tool-pagination">
                    <a-button type="primary" @click="onEdit(null)">新增</a-button>
                </a-col>
            </a-row>
            <a-table bordered :columns="columns" :dataSource="dataList" :pagination="false" :loading="loading" :rowKey="record => record.id" size="middle">
                <template  slot="index"  slot-scope="text,record,index">
                    {{index+1}}
                </template>
                <template slot="operation" slot-scope="text,record">
                    <a @click="onEdit(record)"  class="ant-btn-text">
                        <a-icon :type="record.isInit?'search':'form'" />
                    </a>
                    <a-divider type="vertical" v-if="!record.isInit" />
                    <a @click="onDeleted(record.id)"  class="ant-btn-text" v-if="!record.isInit"><a-icon type="delete" /></a>
                </template>
            </a-table>
        </div>
        <a-modal :title="title" v-model="editVisible"  :footer="null" >
            <role-edit :model="model" @save="handleEditEmit" v-if="editVisible"></role-edit>
        </a-modal>
    </div>
</template>
<script>
    import {findListByType, saveRole, deleted} from "../../api/pubData";
    import RoleEdit from "./roleEdit"
    const columns = [
        {title: '序号', dataIndex: 'index',width: 60,align:'center',scopedSlots: { customRender: 'index' }},
        {title: '角色名称',dataIndex: 'name',align:'left',width: 160},
        {title: '编码',dataIndex: 'code',width: 160,align:'center'},
        {title: '备注',dataIndex: 'remark',align:'left'},
        {title: '操作',key: 'operation',align:'center',width: 120,scopedSlots: { customRender: 'operation' }}];
    export default {
        components:{RoleEdit},
        data() {
            return {
                columns,
                dataList: [],
                params:{
                    dataType: 100
                },
                editVisible:false,
                title:'新增角色',
                loading:false,
                model: null
            }
        },
        beforeCreate(){
            this.form = this.$form.createForm(this);
        },
        methods: {
            //编辑
            async onEdit(record){
                this.editVisible = true;
                this.title = record==null?'新增角色':'编辑角色';
                this.model = record;
            },
            onClose(){
                this.editVisible = false;
            },
            async handleEditEmit(key, data){
                if(key == "add"){
                    let resp = await saveRole(data)
                    if(this.qUtil.validResp(resp)){
                        this.$message.success('数据已保存');
                        this.onClose();
                        this.onLoad();
                    }
                }else {
                    this.onClose();
                }
            },
            //删除
            onDeleted(id){
                const that = this
                this.$confirm({title: '确认删除该角色信息吗?', okText: '确认', okType: 'danger', cancelText: '取消',
                    onOk() {that.handleDelete(id);}, onCancel() {},
                });
            },
            async handleDelete(id){
                let resp = await deleted(id);
                if(this.qUtil.validResp(resp)) {
                    this.$message.success('角色已删除');
                    this.onLoad();
                }
            },
            async onLoad(){
                this.loading = true;
                let resp = await findListByType(this.params.dataType);
                this.loading = false;
                if(!this.qUtil.validResp(resp)) return false;
                this.dataList = resp.data.dataList || [];
            }
        },
        mounted(){
            this.onLoad();
        }
    }
</script>
<style>

</style>
